<template>
	<div class="w750" :style="{ '--main-color': themes.color, '--themescolor': themes.color }">
		<div class="shop-switch-tools" v-if="isPreview">
			<div class="switch-btns-wrap">
				<span>预览：</span>
				<ul class="switch-btns">
					<li class="item switch-btn active">手机版</li>
				</ul>
			</div>
		</div>

		<div class="header_content">
			<div class="m_item_header">
				<header class="ls-header center-x">
					<div class="header-new-bar" ref="bar">
						<div class="ls-header-icon-back black" @click="goback"><span></span></div>
						<div class="header-new-title">
							<span class="summary_title" :style="{ opacity: opacity }">商品详情</span>
						</div>
					</div>
				</header>
			</div>
		</div>

		<div v-if="!Nomsg && goodsDetArr" :class="themes.theme">
			<!-- 商品详情 -->
			<div class="detail">
				<!-- banner -->
				<banner :bannerImg="goodsDetArr.images" @beforeLeave="bannerBeforeLeave" :isPreview="isPreviewImg"
					:isJD="goodsDetArr.prodSource == 'JD'" :video="goodsDetArr.video" />

				<limit-dising :limitedDiscount="limitedDiscount" :promotionPrice="currentSku.price" />

				<!-- 名称,价格,分享,描述 -->
				<div class="det-wrap">
					<div class="det-price d-flex" v-if="!limitedDiscount">
						<div>
							<div class="pro-price">
								<span class="price">
									￥
									<i class="now">{{ Money(currentSku.price)[0] }}</i>
									.{{ Money(currentSku.price)[1] }}
								</span>
								<span v-if="goodsDetArr.taxesSwitch" class="text-999 font-12 ml">
									(含税￥{{ Money(currentSku.taxes)[0] }}.{{ Money(currentSku.taxes)[1] }})
								</span>
							</div>
							<div class="marketprice" v-if="goodsDetArr.marketprice"
								:class="{ hasEarn: (currentSku.commission || currentSku.commission ===0) && currentSku.commission >= 0 && goodsDetArr.invitationCode }">
								<span>
									¥{{ Money(goodsDetArr.marketprice)[0] }}.{{
                                        Money(goodsDetArr.marketprice)[1]
                                    }}
								</span>
							</div>
						</div>
						<div class="earn__warp"
							v-if="goodsDetArr.shareSaleFlagSetting && (currentSku.commission || currentSku.commission ===0) && currentSku.commission >= 0 && goodsDetArr.invitationCode ">
							分享得￥{{ Money(currentSku.commission)[0] }}.{{ Money(currentSku.commission)[1] }}
						</div>
						<like @myEvent="changeFavorite" :favoriteStatus="favoriteStatus"></like>
					</div>
					<div class="grow__warp d-flex a-center"
						v-if="goodsDetArr.growthRuleBO && goodsDetArr.growthRuleBO.growthSwitch">
						<img src="../../assets/images/group.png" class="mr" alt="" style="width: 18px; height: 18px" />
						每购买{{ goodsDetArr.growthRuleBO.buyAmount }}元奖励{{ goodsDetArr.growthRuleBO.growthName
                        }}{{ goodsDetArr.growthRuleBO.growthValue }}
					</div>
					<div class="det-name"
						:style="{ 'padding-right': !limitedDiscount ? '0px' : '52px', 'margin-top': !limitedDiscount ? '13px' : '0px' }">
						<span class="name" style="display: block">
							<em class="dtrangle" v-if="goodsDetArr.goodsType == 'overseas'">跨境</em>
							{{ currentSku.name }}
						</span>
						<like v-if="limitedDiscount" @myEvent="changeFavorite" :favoriteStatus="favoriteStatus"></like>
					</div>
					<div class="det-act">{{ goodsDetArr.brief }}</div>
				</div>

				<div class="det-cont">
					<!-- 领券 -->
					<coupon :couponList="couponList" @successReceive="successReceiveCoupon" />

					<!-- 促销 -->
					<promotion :active="active" />

					<!-- 已选 -->
					<div class="det-checked det-click" @click="clickDet(true)">
						<div class="checked-tit">已选</div>
						<div class="checked-con">
							<span class="check-sku">{{ currentSku.selectName }}</span>
						</div>

						<div class="more">...</div>
					</div>

					<!-- 送至 -->
					<sendTo :addrData="addrData" @choiceAdd="choiceAdd" @onAddress="onAddress" />

					<!-- 服务 -->
					<service-popup :goodsDetArr="goodsDetArr" v-if="goodsDetArr" />
				</div>

				<div class="popup-hide" :class="{ show: showSku }" @click.stop>
					<div class="popup-box">
						<div class="spec-menu">
							<!-- 图片、价格 -->
							<div class="spec-menu-up">
								<div class="spec-img"
									@click="imageSkuPreview(currentSku.images ? currentSku.images : goodsDetArr.pic)">
									<legend-image
										:pic="goodsDetArr.prodSource === 'SELF' ? currentSku.pic : (goodsDetArr.specificationStyle === 'GRAPHIC' ? currentSku.pic : goodsDetArr.pic)"
										:options="{ w: '100', h: '100' }" :isJD="goodsDetArr.prodSource == 'JD'" />
								</div>
								<i class="close close-pop" @click="closeAll"></i>
								<div class="spec-name">{{ currentSku.name }}</div>

								<div class="spec-price" v-if="limitedDiscount">
									￥
									<em class="price"
										style="font-size: 20px">{{ Money(currentSku.price * (limitedDiscount.discount / 10))[0] }}</em>
									.{{ Money(currentSku.price * (limitedDiscount.discount / 10))[1] }}
									<span style="margin-left: 10px; color: #999; text-decoration: line-through"
										class="num">
										¥{{ currentSku.price }}
									</span>
									<span class="text-999 ml" v-if="goodsDetArr.taxesSwitch">
										(含税￥{{ Money(currentSku.taxes)[0] }}.{{ Money(currentSku.taxes)[1] }})
									</span>
								</div>

								<div class="spec-price" v-else>
									￥
									<em class="price">{{ Money(currentSku.price)[0] }}</em>
									.{{ Money(currentSku.price)[1] }}
									<span class="text-999 ml" v-if="goodsDetArr.taxesSwitch">
										(含税￥{{ Money(currentSku.taxes)[0] }}.{{ Money(currentSku.taxes)[1] }})
									</span>
								</div>
							</div>

							<!-- 规格、属性 -->
							<div class="spec-menu-middle">
								<template v-if="skuList">
									<div class="pro-att clearfix" v-for="(prodProp, prodPropIndex) in skuList"
										:key="prodPropIndex">
										<span class="spec-tit">{{ prodProp.propName }}</span>

										<div class="spec-con clearfix">
											<div tag="a" v-for="(prodPropVal, prodPropValIndex) in prodProp.propValues"
												:key="prodPropValIndex" class="item"
												:class="{ on: prodPropVal.isSelect, itemNot: !prodPropVal.isEnable }"
												@click="currentFilter(prodProp.id, prodPropVal.id, prodPropVal.key)">
												{{ prodPropVal.propValue }}
											</div>
										</div>
									</div>
								</template>

								<div class="pro-num clearfix">
									<span class="spec-tit">
										数量
										<em style="color: #e2393b; margin-left: 5px"
											v-if="currentSku.stocks == 0">(库存不足)</em>
									</span>
									<div v-if="goodsDetArr.purchaseLimitMode && goodsDetArr.purchaseLimitMode != 'NOT_LIMIT'"
										class="text-danger font-12 d-flex a-center" style="margin: 12px 5px 0 0">
										<div>
											<span>限购：</span>
											<span>{{ goodsDetArr.purchaseLimitAmount }}</span>
										</div>
									</div>
									<div v-if="goodsDetArr.startSale" class="text-danger font-12 d-flex a-center"
										style="margin: 12px 5px 0 5px">
										<div>
											<span>起售：</span>
											<span>{{ goodsDetArr.startSaleAmount }}</span>
										</div>
									</div>
									<div class="add-sub">
										<a href="javascript:;" class="sub-a"
											:class="{'sub-limit': goodsNum == 1 || goodsNum <= goodsDetArr.startSaleAmount}"
											@click="reduce">-</a>
										<input type="text" value="1"
											:disabled="currentSku.stocks == 0 || currentSku.status == 0"
											class="sub-input" @keyup="changeGoodsNum" @blur="checkGoodsNum"
											v-model.number="goodsNum" />
										<a href="javascript:;" class="sub-a" :class="{'sub-limit': goodsNum == currentSku.stocks || 
																						currentSku.stocks == 0 || 
																						(goodsDetArr.purchaseLimitAmount && goodsDetArr.purchaseLimitMode != 'NOT_LIMIT' && goodsNum >= (goodsDetArr.purchaseLimitAmount - (goodsDetArr.intervalOrderCount || 0))) || 
																						(limitedDiscount && limitedDiscount.limitCount && goodsNum >= limitedDiscount.limitCount)}"
											@click="add">
											+
										</a>
									</div>
								</div>
							</div>

							<!-- 按钮 -->
							<div class="Buytype" v-if="doubleBtn">
								<div class="popup-btn first-btn" @click="addCart"
									:class="{ itemNot: currentSku.stocks == 0 || currentSku.status == 0 || !goodsDetArr.canPurchase }">
									加购物车
								</div>
								<div class="popup-btn" @click="goBuy"
									:class="{ itemNot: currentSku.stocks == 0 || currentSku.status == 0 || !goodsDetArr.canPurchase }">
									立即购买
								</div>
							</div>
							<div class="Buytype" v-if="!doubleBtn">
								<div class="popup-btn"
									:class="{ itemNot: currentSku.stocks == 0 || currentSku.status == 0 }"
									@click="sureBtn">
									确认
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 供应商 -->
				<div class="p-1 my-1 bg-white rounded-12" v-if="goodsDetArr.displaySupplierInformation">
					<router-link :to="'/supplierHome?id=' + goodsDetArr.supplierId">
						<div class="flex-start font-14">
							<legend-image style="width: 60px; height: 60px" :pic="goodsDetArr.supplierLogo" />
							<div class="flex-1 pl-1">
								<div>{{ goodsDetArr.supplierName }}</div>
								<div class="mt-1">售后热线：{{ goodsDetArr.customerServiceHotline }}</div>
							</div>
						</div>
						<div class="font-10 text-ccc flex-center mt">
							<img style="width: 10px; height: 10px" src="../../assets/images/my-warranty-card.png"
								alt="" />
							<span class="ml">该商品是合作商提供，由合作商直接发货并提供售后</span>
						</div>
					</router-link>
				</div>
				<!-- /供应商 -->
				<!-- 图文详情 -->
				<graphic :goodsDetArr="goodsDetArr" />
				<!-- /图文详情 -->

				<!-- 底部 -->
				<div class="det-foot">
					<div class="foot-box">
						<div class="font-14 position-absolute text-warning w-100 h-28p overflow-x text-nowrap"
							style="bottom: 50px; background-color: #f8f1b7; line-height: 28px"
							v-if="!goodsDetArr.canPurchase && goodsDetArr.purchaseDesc">
							{{ goodsDetArr.purchaseDesc }}
						</div>
						<div class="left">
							<div tag="a" class="f-btn" @click="goIndex">
								<em class="f-icon ind"></em>
								<span class="f-txt">首页</span>
							</div>
							<!-- 暂时先屏蔽 -->
							<div tag="a" class="f-btn" @click="serviceChat">
								<em class="f-icon ser"></em>
								<span class="f-txt">客服</span>
							</div>
							<router-link to="/cart" tag="a" class="f-btn">
								<em class="f-icon car">
									<i class="c-num" v-if="cartNum">{{ cartNum > 99 ? '99+' : cartNum }}</i>
								</em>
								<span class="f-txt">购物车</span>
							</router-link>
						</div>
						<div class="right">
							<a href="javascript:;" class="add-cart"
								:class="{ 'but-pe-none-rgb02': !goodsDetArr.canPurchase }"
								@click="clickDet(false, true)">
								加购物车
							</a>
							<a href="javascript:;" class="buy-now" :class="{ 'but-pe-none': !goodsDetArr.canPurchase }"
								@click="clickDet(false, false)">
								立即购买
							</a>
						</div>
					</div>
				</div>
				<!-- /底部 -->

				<!-- 回到顶部 -->
				<div class="go-top" @click="backTop"><img src="../../assets/images/go-top.png" alt="" /></div>
				<!-- /回到顶部 -->

				<div class="share"
					:class="{ earn__share: goodsDetArr.shareSaleFlagSetting && (currentSku.commission || currentSku.commission === 0) && currentSku.commission >= 0 && goodsDetArr.invitationCode }"
					@click="share" v-if="!isPreview">
					<img v-if="goodsDetArr.shareSaleFlagSetting && (currentSku.commission || currentSku.commission === 0) && currentSku.commission >= 0 && goodsDetArr.invitationCode"
						:src="require('../../assets/images/earn.gif')" alt="" />
					<img v-else :src="require('../../assets/images/share.png')" alt="" />
				</div>
				<share-sheet ref="shareSheet" :prames="shareConfig" :shareType="[
                        { type: 'link', text: '复制链接', img: require('@/assets/images/ext-link.png') },
                        { type: 'img', text: '图文', img: require('@/assets/images/ext-img.png') }
                    ]">
					<div slot="top" class="share-value"
						v-if="goodsDetArr.shareSaleFlagSetting && (currentSku.commission || currentSku.commission === 0) && currentSku.commission >= 0 && goodsDetArr.invitationCode">
						分享商品预计可得
						<span class="price">{{ Money(currentSku.commission)[0] }}.{{ Money(currentSku.commission)[1] }}</span>
						{{ commissionType == 'INTEGRAL' ? integralName : '元佣金' }}
					</div>
					<div class="share-des" slot="des"
						v-if="goodsDetArr.shareSaleFlagSetting && (currentSku.commission || currentSku.commission === 0) && currentSku.commission >= 0 && goodsDetArr.invitationCode">
						朋友通过你分享的页面,链接或者图文海报进店成功交易后,你可获得相应的佣金,在"会员中心-分享中心"可以查看
					</div>
					<div class="share-btn" slot="bottom"
						v-if="(currentSku.commission || currentSku.commission === 0) && currentSku.commission >= 0 && goodsDetArr.invitationCode">
						<router-link tag="span" to="/applyExtension" class="btn">
							{{ (currentSku.commission || currentSku.commission === 0) && currentSku.commission >= 0 && goodsDetArr.invitationCode ? '推广中心' : '成为推广员' }}
						</router-link>
					</div>
				</share-sheet>

				<!-- 海报 -->
				<div class="popup-haibao" v-if="posterShow">
					<div class="content">
						<img v-if="posterDataUrl" :src="posterDataUrl" class="poster-bg" alt="邀请海报"
							@click="codePreview(posterDataUrl)"
							style="width: 235px; height: 440px; pointer-events: inherit" />
						<div class="content-bg" v-else id="poster" ref="poster">
							<div class="bg-toux">
								<div class="content-toux">
									<img :src="
                                            posterAttr.pic
                                                ? $imgUrlHead + posterAttr.pic + '?' + new Date()
                                                : require(`@/assets/images/default-goods-img.jpg`)
                                        " class="img" crossOrigi="Anonymous" />
								</div>
								<div class="name">
									<P class="name-txet">{{ posterAttr.name }}</P>
									<P class="title">为你推荐好物</P>
								</div>
							</div>
							<div class="proder">
								<p class="proder-text">{{ goodsDetArr.name }}</p>
								<!-- {{posterAttr.pic}} -->
								<!-- <legend-image :pic="goodsDetArr.pic" :isJD="goodsDetArr.prodSource == 'JD'" :options="{w:'56',h:'56'}" className="object-contain" /> -->
								<img v-if="goodsDetArr.prodSource == 'JD'" :src="'http://img13.360buyimg.com/n12/s750x750_' + goodsDetArr.pic" class="img" alt="" />
								<img v-else :src="$imgUrlHead + goodsDetArr.pic" class="img" alt="" />
								<img src="@/assets/images/haitao-big.png" class="haitao"
									v-if="goodsDetArr.goodsType == 'overseas'" />
							</div>
							<div class="p-price">
								<p class="Assemble">
									￥{{
                                        limitedDiscount
                                            ? `${Money(currentSku.price * (limitedDiscount.discount / 10))[0]}.${
                                                  Money(currentSku.price * (limitedDiscount.discount / 10))[1]
                                              }`
                                            : `${Money(currentSku.commission?currentSku.originalPrice:currentSku.price)[0]}.${Money(currentSku.commission?currentSku.originalPrice:currentSku.price)[1]}`
                                    }}
								</p>
								<p class="price" v-if="goodsDetArr.marketprice != 0 && goodsDetArr.marketprice != null">
									{{ Money(goodsDetArr.marketprice)[0] }}.{{ Money(goodsDetArr.marketprice)[1] }}
								</p>
							</div>
							<div class="text-999 font-12 mt-3">长按保存识别二维码</div>
							<div class="qrcode" ref="qrcode"></div>
						</div>

						<div class="close" @click="closeCode">
							<img class="closeImg" src="@/assets/images/close1.png" alt="" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="content-sidebar">
			<div class="weixin-wrapper">
				<div class="sidebar-section shop-info">
					<p class="text-center weixin-title">微信“扫一扫”立即购买</p>
					<div class="wx-code" ref="wxCode"></div>
				</div>
			</div>
		</div>

		<Noempty :pic="require('../../assets/images/order-empty.png')" :title="'该商品已被删除或已被下线'" v-if="Nomsg" />
		<customerService :shopContact.sync="shopContact"></customerService>
		<bind-phone :bindPhone="bindPhone" ref="bindPhone" @callback="callbackDetail" />
		<!-- <similar-address v-if="goodsDetArr.selAddressList" ref="similarAddress" :list="goodsDetArr.selAddressList"
			@change="changeSimilarAddress"></similar-address> -->
	</div>
</template>

<script>
	import {
		ImagePreview
	} from 'vant'
	import banner from './components/banner'
	import limitDising from './components/limitDising'
	import coupon from './components/coupon'
	import promotion from './components/promotion'
	import sendTo from './components/sendTo'
	import graphic from './components/graphic'
	import servicePopup from './components/servicePopup'
	// import similarAddress from './components/similarAddress'
	import HeadSelect from 'components/headBox/headSelect'
	import Noempty from 'components/Noempty/Noempty'
	import like from 'components/like/like'
	import countDown from 'components/countdown/count-down'
	import shareSheet from 'components/share/shareSheet'
	import customerService from 'components/customerService/customerService'
	import legendImage from 'components/legendImage/legendImage'
	import bindPhone from 'components/bindPhone/bindPhone'
	import QRCode from 'qrcode'
	import StringUtils from 'utils/stringUtils.js'
	import {
		productDetail,
		isExistsFavorite,
		productComments,
		distribution,
		checkOrderParams,
		jdCheckPrice,
		jdCheckStock
	} from 'api/goodsDetail'
	import {
		getCommissionTypeInfo
	} from 'api/extensionApi'
	import {
		saveOrCancel
	} from 'api/collectManage'
	import {
		addShopBuy
	} from 'api/cart'
	import config from 'config/config'
	import cash from 'utils/tool'
	import {
		getUa,
		isMobile
	} from 'utils/utils'
	import {
		mapState
	} from 'vuex'
	import html2canvas from 'html2canvas'
	import {
		tokenManage
	} from 'utils/Cache'
	import {
		getUserInfo
	} from 'api/account'
	import {
		Dialog
	} from 'vant'
	import jumpMixin from "mixin/jumpMixin.js"
	export default {
		name: 'goodsDetail',
		components: {
			Noempty,
			HeadSelect,
			QRCode,
			like,
			'count-down': countDown,
			shareSheet,
			banner,
			limitDising,
			coupon,
			promotion,
			sendTo,
			graphic,
			servicePopup,
			customerService,
			bindPhone,
			legendImage,
			Dialog,
			// similarAddress
		},
		mixins: [jumpMixin],
		data() {
			return {
				marketprice: '1s', //佣金
				opacity: 0,
				commissionType: 'CASH',
				isPreviewImg: false, //是否默认关闭预览图片
				shareConfig: {},
				posterShow: false,
				posterDataUrl: '',
				Money: cash, //价格转换
				prodId: this.$route.query.goodsInfoId, //prodid
				goodsDetArr: '', //商品详情信息
				favoriteStatus: false, //是否关注本商品
				limitedDiscount: '',
				couponList: '', //领券信息
				active: '', //促销的信息
				paramData: '',
				showSku: false, //sku
				Nomsg: false,

				doubleBtn: true, //选择sku显示两个btn
				isAddCart: true, //是否是加入购物车
				goodsNum: 1, //input的数量
				shareUrl: window.location.href,
				sign: '',
				userName: '', //分享用的
				isLogin: tokenManage.getToken() ? true : false, //默认没登录
				//头像跟名字
				posterAttr: {
					name: '',
					pic: ''
				},
				isPreview: !isMobile() ? true : false, //pc的预览
				propObjs: [], // 存改变后的skulist数据
				map: {}, //存cnProperties作为key的数据
				currentSku: {}, //找到isMainSku == true的元素 并且用来渲染页面，数据联动
				cuccentValue: {},
				skuList: [], //用来渲染页面的sku选择
				shopContact: false,
				bindPhone: {
					already: false, // 是否已绑定
					showPopup: false
				},
				addrData: {
					type: 0, //0:选择用户已有的收货地址(后台读取addrId数据)，1：自定义选择区域(后台读取addrList数据)
					addrId: '',
					addrList: [],
					addrName: ''
				},
				times: 0
			}
		},

		computed: {
			...mapState(['integralName', 'themes', 'cartNum'])
		},
		mounted() {
			// 进入商品详情时，清除订单中缓存的路由信息
			sessionStorage.removeItem('preRoute')

			this.scale = document.documentElement.clientWidth / 750
			let that = this

			if (this.$route.query.token) {
				tokenManage.setToken(JSON.parse(this.$route.query.token))
			}

			if (this.isLogin) {
				this.$store.dispatch('getCartGoods')
			}

			window.addEventListener('scroll', this.scrollToTop)
			this.prodId = this.$route.query.goodsInfoId

			this.sign = this.$route.query.sign
			this.userName = this.$route.query.userName

			// 配置项
			if (this.isPreview) {
				this.createwxQRCode()
			}
			if (this.$route.query.showSku == 'true') {
				this.clickDet(false, false)
			}
			
			//console.log(this.prodId, this.addrData)
			this.getDetaildata(this.prodId, this.addrData)
		},

		beforeRouteLeave(to, from, next) {
			to.meta.isBack = true
			if (!this.isPreviewImg && !this.picPreview) {
				next()
			} else {
				next(false)
				if (this.isPreviewImg || this.picPreview) {
					this.isPreviewImg = false
					this.picPreview = ''
				}
			}
		},
		destroyed() {
			window.removeEventListener('scroll', this.scrollToTop)
		},
		methods: {
			// 选择重复地址
			changeSimilarAddress(val) {
				if (val) {
					sessionStorage.setItem('addrId', val.addrId)
				}
				this.goBuy(true)
			},
			//监听是否关闭预览
			bannerBeforeLeave(val) {
				this.isPreviewImg = val
			},

			closeCode() {
				this.posterShow = false
			},

			async createQRCode() {
				// 配置项
				const options = {
					width: 80,
					height: 80,
					background: '#ffffff',
					colorDark: '#000000',
					margin: 1
				}

				const result = await QRCode.toDataURL(
					`${window.location.origin}${this.$route.path}?invitCode=${this.goodsDetArr.invitationCode || ''}&goodsInfoId=${this.prodId}`,
					options
				)

				const images = document.createElement('img')
				images.setAttribute('src', result)
				this.$refs.qrcode.appendChild(images)

				// 手动创建一个 canvas 标签
				let canvas = document.createElement('canvas')
				// // 获取父标签，意思是这个标签内的 DOM 元素生成图片
				let canvasBox = this.$refs.poster

				// // 获取父级的宽高
				const width = parseInt(window.getComputedStyle(canvasBox).width)
				const height = parseInt(window.getComputedStyle(canvasBox).height)

				let rect = canvasBox.getBoundingClientRect() //获取元素相对于视察的偏移量

				const options1 = {
					width: width,
					height: height,
					allowTaint: false,
					dpi: window.devicePixelRatio * 2,
					scale: 2,
					useCORS: true
				}

				html2canvas(canvasBox, options1).then((canvas) => {
					// toDataURL 图片格式转成 base64
					let dataURL = canvas.toDataURL('image/png', 1.0)

					this.posterDataUrl = dataURL
				})
			},

			async createwxQRCode() {
				const options = {
					width: 150,
					height: 150,
					background: '#ffffff',
					colorDark: '#000000',
					margin: 1
				}

				const result = await QRCode.toDataURL(this.shareUrl, options)
				const images = document.createElement('img')
				images.setAttribute('src', result)
				this.$refs.wxCode.appendChild(images)
			},
			// 点击图片回到顶部方法，加计时器是为了过渡顺滑
			backTop() {
				let that = this
				let timer = setInterval(() => {
					let ispeed = Math.floor(-that.scrollTop / 5)
					document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
					if (that.scrollTop === 0) {
						clearInterval(timer)
					}
				}, 16)
			},
			//返回
			goback() {
				if (window.history.length <= 2 || window.history.length <= 1) {
					this.$router.replace('index')
					return
				}
				this.$router.back()
				this.$router.isBack = true
			},
			//去首页
			goIndex() {
				this.$router.push('/')
			},

			// 成功领取优惠券
			successReceiveCoupon() {
				this.getDetaildata(this.prodId, this.addrData)
			},

			//获取页面初始化数据
			async getDetaildata(prodId, addrData) {
				let prames = {
					prodId: prodId,
					type: addrData.type ? addrData.type : 0,
					addrId: addrData.addrId ? addrData.addrId : '',
					addrList: addrData.addrList ? addrData.addrList : [],
					addrName: addrData.addrName ? addrData.addrName : ''
				}

				this.$toast.loading({
					message: '加载中...'
				})
				try {
					let res = await productDetail(prames)
					if (!res.result || res.status != 1) {
						this.Nomsg = true
						this.$toast(res.msg)
						return
					}

					if (!StringUtils.isEmpty(res.result.addrData)) {
						this.addrData = res.result.addrData //值传到后台后，后台再原封不动的返回给前端(当前端不传值时，则返回的是默认地址或北京朝阳区)
						sessionStorage.setItem('addrId', this.addrData.addrId || '')
					}

					//收藏的标记
					this.favoriteStatus = res.result.isCollect

					//获取接口的信息
					this.goodsDetArr = res.result

					// 配置分享
					let imgUrl = ''
					if (this.goodsDetArr.prodSource == 'JD') {
						imgUrl = 'http://img13.360buyimg.com/n12/' + this.goodsDetArr.pic
					} else {
						imgUrl = this.$imgUrlHead + this.goodsDetArr.pic +
							'?x-oss-process=image/resize,w_124,h_124,limit_0,m_fixed'
					}
					this.$weChat.share({
						title: this.goodsDetArr.name,
						desc: '这个商品我很喜欢，分享给你看看',
						imgUrl
					})

					// 如果是京东商品 手动拼接img标签 必须用$set
					if (res.result.content && res.result.prodSource == 'JD') {
						let imgsList = res.result.contentImages ? JSON.parse(res.result.contentImages) :
						[] //定义变量接收img标签数组
						if (imgsList && imgsList.length) {
							let newList = ''
							for (let i in imgsList) {
								newList += `<img style="width:100%"  src="${imgsList[i]}" />`
							}
							this.$set(this.goodsDetArr, 'content', newList)
						}
					}

					//营销折扣的信息
					if (res.result.activeMap.limitedDiscount) {
						this.limitedDiscount = res.result.activeMap.limitedDiscount
					}

					//营销优惠券的信息
					if (res.result.activeMap.couponList) {
						this.couponList = res.result.activeMap.couponList
					}

					//营销促销的信息
					if (res.result.activeMap.active) {
						this.active = res.result.activeMap.active
					}

					// 商品起售问题
					if (res.result.startSale) {
						this.goodsNum = res.result.startSaleAmount
					}

					//sku的集合
					let skuDtoList = this.goodsDetArr.skuDtoList

					//多个sku的集合
					if (skuDtoList[0].cnProperties) {
						this.propObjs = skuDtoList.map((v) => {
							return {
								...v,
								cnProperties: v.cnProperties.split(';'),
								properties: v.properties.split(';'),
								key: v.properties,
								selectName: v.cnProperties
							}
						})

						this.propObjs.forEach((v) => {
							this.map[v.key] = v
						})

						this.currentSku = this.propObjs.find((v) => v.isMainSku)

						this.cuccentValue = this.currentSku.properties.reduce((res, cur) => {
							let arr = cur.split(':')
							res[arr[0]] = arr[1]
							return res
						}, {})

						this.buildSkuList()
					} else {
						//没有sku
						this.currentSku = skuDtoList[0]
						this.currentSku.selectName = skuDtoList[0].name
					}

					//检查京东商品价格是否改变
					if (res.result.prodSource == 'JD' && res.result.jdSkuId) {
						this.CheckJDPrice(res.result.jdSkuId)
					}
				} catch (error) {} finally {
					this.$toast.clear()
				}

				try {
					let res = null
					this.goodsDetArr.isPromoter == true && this.goodsDetArr.supportDist == true && (res =
						await getCommissionTypeInfo())

					res && (this.commissionType = res.result.commissionType)
				} catch (error) {}
			},

			//创建sku
			buildSkuList() {
				const propObjs = this.propObjs
				// 用前面的拼最后一个
				this.skuList = propObjs.reduce((res, propObj) => {
					propObj.properties.forEach((p, i) => {
						let _ids = p.split(':')
						let _values = propObj.cnProperties[i].split(':')
						let prop = res.find((v) => v && _ids[0] == v.id)
						if (prop) {
							let idx = prop.propValues.findIndex((pv) => {
								return pv && pv.id === _ids[1]
							})
							if (idx == -1) {
								prop.propValues.push({
									id: _ids[1],
									propValue: _values[1]
								})
							}
						} else {
							res.push({
								id: _ids[0],
								propName: _values[0],
								propValues: [{
									id: _ids[1],
									propValue: _values[1]
								}]
							})
						}
					})
					return res
				}, [])
				this.initSkuList()
			},
			//
			getKey(fid, sid) {
				let _d = {
					...this.cuccentValue
				}
				_d[fid] = sid
				return this.skuList
					.reduce((res, cur) => {
						res.push(`${cur.id}:${_d[cur.id]}`)
						return res
					}, [])
					.join(';')
			},
			//初始化
			initSkuList() {
				let cuccentValue = this.cuccentValue
				let skuList = [...this.skuList.map((v) => v)]
				skuList.forEach((f) => {
					f.propValues.forEach((s) => {
						let key = this.getKey(f.id, s.id)
						let sku = this.map[key]
						s.isEnable = sku && (sku.status != 1 || sku.stocks <= 0) ? false : true
						s.isSelect = s.isEnable && cuccentValue[f.id] === s.id
						s.key = key
						s.sku = sku
					})
				})
				this.skuList = skuList

			},
			// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
			scrollToTop() {
				let that = this
				let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
				that.scrollTop = scrollTop
				if (that.scrollTop > 60) {
					that.btnFlag = true
				} else {
					that.btnFlag = false
				}

				// 滚动渐变
				const bar = this.$refs.bar
				if (scrollTop < 200) {
					this.opacity = (scrollTop / 260).toFixed(1) * 1
				} else {
					this.opacity = 1
				}

				bar.style.background = `rgba(255,255,255,${this.opacity})`

				this.opacity == 0 ? (bar.childNodes[0].style.background = `rgba(0,0,0,0.5)`) : (bar.childNodes[0].style
					.background = `rgba(0,0,0,${0})`)

				this.opacity == 0 ? bar.childNodes[0].classList.add('black') : bar.childNodes[0].classList.add('witer')

				this.opacity == 0 && bar.childNodes[0].classList.remove('witer')
			},
			//加入购物车
			addCart() {
				if (this.isLogin) {
					//校验是否有绑定过手机号码
					// this.$router.replace({ path: '/login', query: { redirect: this.$route.fullPath } })
					if (!this.goodsDetArr.bindMobile) {
						// this.$router.replace({ path: '/login', query: { redirect: this.$route.fullPath } })
						this.$utils.goLoginPage(this)
						return
					}
					// if (!this.goodsDetArr.bindMobile) {
					// 	this.showSku = false
					// 	this.bindPhone.showPopup = true
					// 	return
					// }
				}
				if (this.goodsNum > 0) {
					addShopBuy({
						count: this.goodsNum,
						distUserId: '',
						prodId: this.prodId,
						skuId: this.currentSku.skuId
					}).then((res) => {
						if (res.status == 1) {
							this.$store.state.cartNum += this.goodsNum
							this.goodsNum = 1
							this.getDetaildata(this.prodId, this.addrData)
							this.showSku = false
							this.$toast('已加入购物车')
						} else {
							this.$toast(res.msg)
							// 起售判断
							if (this.goodsDetArr.startSale) {
								this.goodsNum = this.goodsDetArr.startSaleAmount
								return
							}

							// 限购判断
							if (this.goodsDetArr.purchaseLimitMode != 'NOT_LIMIT') {
								this.goodsNum = this.goodsDetArr.purchaseLimitAmount
								return
							}
						}
					})
				} else {
					this.$toast('商品数量不能小于1')
				}
			},
			//立即购买 isSelAddressTest:是否经验
			goBuy(isSelAddressTest = false) {
				if (this.isLogin) {
					//校验是否有绑定过手机号码
					if (!this.goodsDetArr.bindMobile) {
						// this.$router.replace({ path: '/login', query: { redirect: this.$route.fullPath } })
						this.$utils.goLoginPage(this)
						return
					}
					//校验是否有绑定过手机号码
					// if (!this.goodsDetArr.bindMobile) {
					// 	this.showSku = false
					// 	this.bindPhone.showPopup = true
					// 	return
					// }
				}

				if (this.currentSku.stocks == 0) {
					this.$toast('亲，您选择的规格没有库存了哦~~')
					return
				}

				if (this.currentSku.status == 0) {
					this.$toast('亲，您选择的规格，已下架')
					return
				}

				let result = {
					flag: false,
					message: ''
				}
				let prames = {
					type: 'NORMAL',
					buyNow: true,
					count: this.goodsNum,
					prodId: this.prodId,
					skuId: this.currentSku.skuId
				}

				if (this.limitedDiscount) {
					if (this.limitedDiscount.userDiscountBuys == this.limitedDiscount.limitCount) {
						this.$toast(
							`该活动商品限购${this.limitedDiscount.limitCount}件,您已购买了${this.limitedDiscount.userDiscountBuys}件`
						)
						return
					}

					if (this.limitedDiscount.limitCount) {
						if (this.limitedDiscount.limitCount < this.goodsNum) {
							this.$toast(`该活动商品限购${this.limitedDiscount.limitCount}件`)
							return
						}
					}
				}

				// 需要选择地址和判断是否已选择  不需要此功能
				// if (this.goodsDetArr.selAddress === 2 && !isSelAddressTest) {
				// 	this.$refs.similarAddress.show = true
				// 	return
				// }
				if (this.goodsNum > 0) {
					if (this.goodsNum <= this.currentSku.stocks) {
						checkOrderParams(prames).then((res) => {
							if (!res.success) {
								this.$toast(res.msg)

								// 起售判断
								if (this.goodsDetArr.startSale) {
									this.goodsNum = this.goodsDetArr.startSaleAmount
									return
								}

								// 限购判断
								if (this.goodsDetArr.purchaseLimitMode && this.goodsDetArr.purchaseLimitMode !=
									'NOT_LIMIT') {
									this.goodsNum = this.goodsDetArr.purchaseLimitAmount
									return
								}

								return
							}
							this.showSku = false
							if (this.goodsDetArr.selAddress === 1 && !isSelAddressTest) {
								this.$dialog
									.confirm({
										message: '您在浏览中切换了新地址，是否新建地址？'
									}).then(() => {
										this.$router.push({
											path: `/addAddress`,
											query: {
												addrData: encodeURIComponent(JSON.stringify(this
													.goodsDetArr.addrData)),
												orderPrames: encodeURIComponent(JSON.stringify(prames))
											},

										})
									}).catch(() => {
										this.$router.push({
											path: `/submitOrder`,
											query: prames
										})
									})

								return
							}
							this.$router.push({
								path: `/submitOrder`,
								query: prames
							})
						})
					} else {
						this.$toast('商品库存不足')
					}
				} else {
					this.$toast('商品数量不能小于1')
				}
			},

			//确认按钮  是立即付款还是加入购物车
			sureBtn() {
				this.$utils.uDebounce(() => {
					if (this.goodsNum.toString().indexOf('.') == -1) {
						if (this.isAddCart) {
							this.addCart()
						} else {
							this.goBuy()
						}
					} else {
						this.goodsNum = 1
						this.$toast('购买的数量必须为整数,请重新输入')
					}
				})
			},

			async checkOrderParams(prames) {
				let result = {
					flag: false,
					message: ''
				}
				try {
					let res = await checkOrderParams(prames)
					result.flag = res.success
					result.message = res.msg
				} catch (error) {}


				return result
			},
			callbackDetail() {
				this.goodsDetArr.bindMobile = true
			},
			//关闭图片预览
			closePic() {
				// history.pushState(null, null, document.URL);
				if (this.picPreview) {
					// this.picPreview.onClose()
					return
				} else if (this.showSku) {
					this.showSku = false
					return
				} else if (this.showCoupon) {
					this.showCoupon = false
					return
				} else if (this.showActivity) {
					this.showActivity = false
					return
				} else {
					this.goback()
				}
			},
			//改变是否收藏
			changeFavorite(flag) {
				this.$utils.uDebounce(() => {
					saveOrCancel(flag, this.prodId).then((res) => {
						if (res.status == 1) {
							this.favoriteStatus = !this.favoriteStatus
							this.$toast(res.result)
						} else {
							this.$toast(res.msg)
						}
					})
				})
			},
			//选择sku的图片预览
			imageSkuPreview(pic) {
				let arrPic = []
				if (Array.isArray(pic)) {
					if (this.goodsDetArr.prodSource == 'JD') {
						arrPic = pic.map((v) => `http://img13.360buyimg.com/n12/` + v)
					} else {
						arrPic = pic.map((v) => this.$imgUrlHead + v)
					}
				} else {
					if (this.goodsDetArr.prodSource == 'JD') {
						arrPic[0] = `http://img13.360buyimg.com/n12/` + pic
					} else {
						arrPic[0] = this.$imgUrlHead + pic
					}
				}


				this.picPreview = ImagePreview({
					images: arrPic,
					startPosition: 0
					// onClose() {
					//     // do something
					// }
				})
			},
			codePreview(img) {
				ImagePreview({
					images: [img],
					startPosition: 0
					// onClose() {
					//     // do something
					// }
				})
			},

			async add() {
				// 京东商品
				if (this.goodsDetArr.prodSource == 'JD' && !(await this.checkJdStore(this.goodsNum + 1))) {
					this.$toast('选择的数量超过了库存')
					return
				}
				// 普通商品

				if (this.goodsNum + 1 > this.currentSku.stocks) {
					this.$toast('选择的数量超过了库存')
					return
				}

				if (this.isAddCart) { //点击购物车的添加
					this.addJudge('cart');

				} else { //点击立即购买
					this.addJudge('buy');
				}
			},

			reduce() {
				// 起购判断
				if (this.goodsDetArr.startSale) {
					if (this.goodsNum <= this.goodsDetArr.startSaleAmount) {
						let title = this.goodsDetArr.purchaseLimitMode && this.goodsDetArr.purchaseLimitMode !=
							'NOT_LIMIT' ? '活动' : '商品'
						this.$toast(`${title}起售${this.goodsDetArr.startSaleAmount}件`)
						return
					}
				}

				if (this.goodsNum <= 1) {
					return this.$toast(`最少购买一件`)
				}
				this.goodsNum--
			},

			//判断是购物车添加还是购买添加
			addJudge(type) {
				if (type == 'cart') {
					// 限购判断
					if (this.goodsDetArr.purchaseLimitMode && this.goodsDetArr.purchaseLimitMode != 'NOT_LIMIT') {
						if (this.goodsNum >= (this.goodsDetArr.purchaseLimitAmount - (this.currentSku
								.intervalOrderCount || 0) - (this.currentSku.cartProdCount ||
							0))) { //判断购物数量是否大于 可购数量-已购数量-购物车数量
							let additiveNum = this.goodsDetArr.purchaseLimitAmount - this.currentSku.intervalOrderCount -
								this.currentSku.cartProdCount; //可加数量
							this.$toast(
								`商品限购${this.goodsDetArr.purchaseLimitAmount}件，您已购${this.currentSku.intervalOrderCount}件\n购物车已加${this.currentSku.cartProdCount}件，最多可加${additiveNum>0?additiveNum:0}件`
							)
							return
						}
					}
					//优惠限购
					if (this.limitedDiscount.limitCount) {
						if (this.goodsNum >= this.limitedDiscount.limitCount - (this.limitedDiscount.userDiscountBuys ||
							0) - (this.goodsDetArr.cartProdCount || 0)) { //判断购物数量是否大于 可购数量-已购数量-购物车数量
							let additiveNum = this.limitedDiscount.limitCount - this.limitedDiscount.userDiscountBuys - this.currentSku.cartProdCount;
							this.$toast(
								`活动限购${this.limitedDiscount.limitCount}件，您已购${this.limitedDiscount.userDiscountBuys}件\n购物车已加${this.currentSku.cartProdCount}件，最多可加${additiveNum>0?additiveNum:0}件`
							)
							return
						}
					}
					this.goodsNum++
				} else {
					// 限购判断
					if (this.goodsDetArr.purchaseLimitMode && this.goodsDetArr.purchaseLimitMode != 'NOT_LIMIT') {
						if (this.goodsNum >= (this.goodsDetArr.purchaseLimitAmount - (this.currentSku
								.intervalOrderCount || 0))) { //判断购物数量是否大于 可购数量-已购数量
								//console.log(this.goodsDetArr.purchaseLimitAmount - this.currentSku.intervalOrderCount)
								let additiveNum = this.goodsDetArr.purchaseLimitAmount - this.currentSku.intervalOrderCount;
							this.$toast(
								`商品限购${this.goodsDetArr.purchaseLimitAmount}件，您已购${this.currentSku.intervalOrderCount}件\n，最多可加${additiveNum>0?additiveNum:0}件`
							)
							return
						}
					}
					//优惠限购
					if (this.limitedDiscount.limitCount) {
						if (this.goodsNum >= this.limitedDiscount.limitCount - (this.limitedDiscount.userDiscountBuys ||
							0)) { //判断购物数量是否大于 可购数量-已购数量
							let additiveNum = this.limitedDiscount.limitCount - this.currentSku.intervalOrderCount;
							this.$toast(
								`活动限购${this.limitedDiscount.limitCount}件，您已购${this.limitedDiscount.userDiscountBuys}件\n，最多可加${additiveNum>0?additiveNum:0}件`
							)
							return
						}
					}
					this.goodsNum++
				}
			},

			//手动输入货物数量
			async changeGoodsNum() {
				// 京东商品
				if (this.goodsDetArr.prodSource == 'JD' && !(await this.checkJdStore(this.goodsNum ? this.goodsNum :
						1))) {
					this.$toast('数量超过库存')
					this.goodsNum = 1
					return
				}
				// 普通商品
				else {
					if (this.goodsNum > this.currentSku.stocks) {
						this.goodsNum = this.currentSku.stocks
						this.$toast('数量超过库存')
					}
				}
			},

			// 商品数量校验
			checkGoodsNum() {
				// 起售判断
				if (this.goodsDetArr.startSale && this.goodsNum < this.goodsDetArr.startSaleAmount) {
					this.goodsNum = this.goodsDetArr.startSaleAmount
					this.$toast(`商品起购${this.goodsDetArr.startSaleAmount}件`)
					return
				}

				// 限购判断
				if (
					this.goodsDetArr.purchaseLimitMode &&
					this.goodsDetArr.purchaseLimitMode != 'NOT_LIMIT' &&
					this.goodsNum > this.goodsDetArr.purchaseLimitAmount
				) {
					this.goodsNum = this.goodsDetArr.purchaseLimitAmount
					this.$toast(`商品限购${this.goodsDetArr.purchaseLimitAmount}件`)
					return
				}

				if (this.goodsNum <= 0) {
					this.goodsNum = 1
				}
			},

			//选择sku
			currentFilter(pid, vid, key) {
				let cuccentValue = {
					...this.cuccentValue
				}

				cuccentValue[pid] = vid

				this.cuccentValue = cuccentValue

				this.initSkuList()

				this.currentSku = this.map[key]

				// 商品起售限制
				if (this.goodsDetArr.startSale) {
					this.goodsNum = this.goodsDetArr.startSaleAmount
				} else {
					this.goodsNum = 1
				}

			},

			//关闭所有弹框
			closeAll() {
				this.showSku = false
				this.showCoupon = false
				this.showActivity = false
			},
			//展示选择sku列表
			clickDet(isDouble, sureType) {
				this.showSku = true
				this.doubleBtn = isDouble
				this.isAddCart = sureType
			},
			//展示分享商品(由于现用安卓原生分享，当用到自写的分享组件时，才打开此代码)
			clickShare() {
				this.showShare = !this.showShare
			},

			//回到顶部
			toTop() {
				let that = this
				let timer = setInterval(() => {
					let ispeed = Math.floor(-that.scrollTop / 5)
					document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
					if (that.scrollTop === 0) {
						clearInterval(timer)
					}
				}, 100)
			},
			//去客服
			serviceChat() {
				this.shopContact = true
			},
			//分享
			share() {
				// this.sheetShow = true
				this.$refs.shareSheet.sheetShow = true

				if (this.goodsDetArr.userName && this.goodsDetArr.sign) {
					this.shareConfig.shareText = `【${this.goodsDetArr.name}】这个商品我很喜欢，分享给你看看 ${window.location.origin}${
                    this.$route.path
                }?goodsInfoId=${this.prodId}&invitCode=${this.goodsDetArr.invitationCode || ''}`
				} else {
					this.shareConfig.shareText = `【${this.goodsDetArr.name}】这个商品我很喜欢，分享给你看看 ${window.location.origin}${
                    this.$route.path
                }?goodsInfoId=${this.prodId}&invitCode=${this.goodsDetArr.invitationCode || ''}`
				}

				if (!this.posterDataUrl) {
					if (this.isLogin) {
						getUserInfo()
							.then((res) => {
								if (res.status == 1) {
									this.posterAttr.name = res.result.nickName
									this.posterAttr.pic = res.result.avatarUrl
								} else {
									this.posterAttr.name = '匿名'
									this.posterAttr.pic = ''
								}
							})
							.catch(() => {
								this.posterAttr.name = '匿名'
								this.posterAttr.pic = ''
							})
					} else {
						this.posterAttr.name = '匿名'
						this.posterAttr.pic = ''
					}
				}
			},
			// 点击"送至"里的地址
			choiceAdd(addrId, item) {
			  let addrIds = new Array();
				addrIds.push(item.provinceId);
				addrIds.push(item.cityId);
				addrIds.push(item.areaId);
				addrIds.push(item.townId);
				let addrData = {
					type: 0, //0:选择用户已有的收货地址(后台读取addrId数据)，1：自定义选择区域(后台读取addrList数据)
					addrId: addrId,
					addrList: addrIds,
					addrName: ''
				}
				this.goodsNum = 1
				this.getDetaildata(this.prodId, addrData)
			},

			onAddress(addrData) {
				this.goodsNum = 1
				this.getDetaildata(this.prodId, addrData)
			},
			CheckJDPrice(jdSkuId) {
				//累计次数不能超过三次
				if(++this.times > 3) return
				setTimeout(() => {
					jdCheckPrice({
							jdSkuId
						})
						.then((res) => {
							if (res.result) {
								this.getDetaildata(this.prodId, this.addrData)
								// Dialog.confirm({
								// 	title: '温馨提示',
								// 	message: '检测到该商品价格已变化，需要重载商品！'
								// }).then(() => {
								// 	// 刷新
								// 	this.getDetaildata(this.prodId, this.addrData)
								// })
							}
						})
						.catch((err) => {})
				}, 1000)
			},

			// 检查京东是否有库存
			async checkJdStore(num) {

				const stockResult = await jdCheckStock({
						address: this.addrData.addrName.replace(/\s*/g, ''),
						count: num,
						jdSkuId: this.goodsDetArr.jdSkuId
					})
					.then((res) => {
						return res.result
					})
					.catch((err) => {
						return false
					})

				return stockResult
			}
		}
	}
</script>

<style src="@/assets/css/style/detail-style.css"></style>
<style src="@/assets/css/detail.css"></style>
<style src="@/assets/css/popup.css"></style>
<style src="@/assets/css/get-coupons.css"></style>
<style src="@/assets/css/comment-list.css"></style>
<style lang="stylus" scoped>
	.AllHeight {
		overflow: hidden !important;
	}
</style>

<style lang="stylus" scoped>
	.earn__share {
		position: fixed;
		right: 10px;
		width: 56px !important;
		bottom: 115px;
		height: 56px !important;
		line-height 56px;
		border-radius: 50%;
		font-size: 0;
		cursor: pointer;
		text-align: center;
		background: transparent !important;

		img {
			width: 56px !important;
			height: 56px !important;
		}
	}

	.marketprice {
		font-size: 12px;
		text-decoration: line-through;
		color: #999;
		vertical-align: middle;
		margin-top: 11px;
		display: inline-block;
		margin-left: 11px;
	}

	.marketprice.hasEarn {
		margin-top: 0;
		display: block;
		margin-left: 0;
	}


	.earn__warp {
		display: inline-block;
		padding: 6px 14px;
		border-radius: 4px;
		height: 32px;
		color: #EE4133;
		font-size: 14px;
		background: rgba(238, 65, 51, 0.1);
		position: relative;
		margin-left: 15px;

		&::before {
			content: '';
			position absolute;
			left: 0;
			top: 50%;
			transform: translate(-100%, -50%);
			display: block;
			width: 0;
			height: 0;
			border-top: 7.5px solid transparent;
			border-right: 8px solid rgba(238, 65, 51, 0.1);
			border-bottom: 7.5px solid transparent;
		}

	}

	.grow__warp {
		padding 0 10px;
		background: #FFF7ED;
		border-radius: 4px;
		height: 36px;
		margin-top: 12px;
		font-size: 12px;
	}

	.toTop {
		width: 50px;
		height: 68px;
		position: fixed;
		right: 100px;
		bottom: 100px;
		cursor: pointer;
		background: url("../../assets/images/1551.png") no-repeat;
		overflow: hidden;

		.toTop-txt {
			color: #fff;
			font-size: 12px;
			position: relative;
			top: 70px;
			transition: all .2s linear;
		}
	}

	.toTop:hover .toTop-txt {
		top: 52px;
	}

	.toTop:hover {
		background: url("../../assets/images/1551.png") no-repeat;
	}

	.item.pointerEvents {
		pointer-events: none;
	}

	.get-coupons .list-item.red-got .right .han .get-btn {
		background -webkit-linear-gradient(left, #6c96da, #6b83d7) !important;
		color: #fff !important;
	}

	.storeSelf {
		font-size: 14px;
		text-align: right;
		padding: 15px 0;

		span {
			color: #999;

			em {
				margin-left: 5px;
				color: #4eae31;
			}
		}
	}
</style>
